<template>
  <div>
    <div class="search-bar">
      <el-form
        :inline="true"
        class="search-form"
        ref="test-form"
        :model="searchForm"
        label-width="auto"
        size="small"
        style="display: flex; justify-content: space-between"
      >
        <div class="input-row">
            <!-- 充值方案 -->
          <el-form-item :label="$t('recharge.administration.scheme')" class="search-form-item">
            <el-input v-model="form.name" :placeholder="$t('recharge.administration.scheme')"></el-input>
          </el-form-item>
                <!-- 充值类型 -->
          <el-form-item :label="$t('recharge.administration.type')" class="search-form-item">
            <el-select v-model="form.type" :placeholder="$t('recharge.administration.type')">
              <el-option :label="$t('recharge.administration.userrecharge')" value="1"></el-option>
              <el-option :label="$t('recharge.administration.Bendcharge')" value="2"></el-option>
            </el-select>
          </el-form-item>
            <!-- 状态 -->
          <el-form-item :label="$t('recharge.administration.state')" class="search-form-item">
            <el-select v-model="form.type" :placeholder="$t('recharge.administration.state')">
              <el-option :label="$t('recharge.administration.whole')" value=""></el-option>
              <el-option :label="$t('recharge.administration.Enable')" value="1"></el-option>
              <el-option :label="$t('recharge.administration.Deactivate')" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('recharge.administration.Creationtime')" class="search-form-item">
            <el-input v-model="form.name" :placeholder="$t('recharge.administration.Creationtime')"></el-input>
          </el-form-item>

          <!-- <el-form-item label="审核状态:" class="search-form-item">
            <el-select v-model="form.region" placeholder="选择活动类型">
              <el-option label="未审核" value="1"></el-option>
              <el-option label="已审核" value="2"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <div class="default-btn primary-btn">{{ $t('crud.searchBtn') }}</div>
            <div class="default-btn">{{ $t('product.reset') }}</div>
          </el-form-item>
        </div>
        <div>
        </div>
      </el-form>
    </div>
    <div>
        <div class="operation-bar">
          <div class="select">
            <el-checkbox class="all-check-btn">{{$t('publics.selectAll')}}</el-checkbox>
            <div  @click.stop="deleteHandle">{{$t("sys.batchDelete")}}</div>
          </div>
          <!-- <span v-if="dataListSelections.length" class="had-selected">{{$t('publics.selected')}} {{dataListSelections.length}}</span> -->
          <div class="default-btn primary-btn"  @click="addOrUpdateHandle">{{$t('recharge.administration.Newstoragescheme')}}</div>
         
        </div>
        <div class="table-con">
      <!-- <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          @selection-change="selectionChange"
          style="width: 100%"
          ref="hotTable"
          @select-all="clearAllSelection"
      > -->
      <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
          ref="hotTable"
      >
        <el-table-column
          type="selection"
          width="65">
        </el-table-column>
        <el-table-column
         :label="$t('recharge.administration.schemenumber')"
          align="left"
          prop="title">
          <template slot-scope="scope">
            <span class="table-cell-text">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          align="left"
          :label="$t('recharge.administration.schemename')"
        >
          <template slot-scope="scope">
            <span class="table-cell-text">{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="recDate"
          align="left"
          :label="$t('recharge.administration.scheme')"
        >
        </el-table-column>
        <el-table-column
          prop="recDate"
          align="left"
          :label="$t('recharge.administration.type')"
        >
        </el-table-column>
        <el-table-column
          align="left"
          prop="seq"
          :label="$t('recharge.administration.Creationtime')"
        >
        </el-table-column>
        <el-table-column
          align="left"
          :label="$t('recharge.administration.Enablestate')"
        >
          <template slot-scope="scope">
            <span>{{ [$t('live.offline'),$t('publics.normal')][scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('recharge.administration.operation')"
          fixed="right"
          width="180"
          >
          <template slot-scope="scope">
            <div class="text-btn-con">
              <div  class="default-btn text-btn" >{{ $t('text.updateBtn') }}</div>
              <div class="default-btn text-btn">{{ $t('text.delBtn') }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    </div>

    <Administration v-if="Adminshow"
                   ref="Administration"
                  ></Administration>

  </div>
</template>

<script>
import Administration from './administration-update'

export default {
  components: {
    Administration
  },

  data () {
    return {
      dataList: [],
      // 返回的参数
      itemInOf: '',
      Adminshow: false,
      form: {
        type: '',
        region: '',
        name: '',
        DAWname: ''
      }

    }
  },
  mounted () {
  },
  methods: {

    addOrUpdateHandle () {
      this.Adminshow = true
      this.$nextTick(() => {
        this.$refs.Administration.init()
      })
    }

  }
}
</script>

<style scoped>
.operation-bar{
  display: flex;
  margin-bottom: 20px;
}
.operation-bar .select{
  display: flex;
  align-items: center;
}
.operation-bar .select div{
  margin: 0 30px;
}



.categoryManagement {
  width: 95% !important;
  margin: 30px auto 0;
}
.categoryManagement-table-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px 0;
}
.categoryManagement-table-header div {
  display: flex;
  flex-direction: row;
}
.categoryManagement-table-header div .input {
  margin-right: 15px !important;
}

.categoryManagement >>> .has-gutter tr th .cell {
  text-align: center;
}
.categoryManagement >>> .el-table__row td .cell {
  text-align: center;
}
</style>
